<template>
	<view class="title" :style="{padding: padding}">
		<view class="title-left">
			<view class="title-left-top" :style="{fontSize: leftSize + 'rpx'}">
				{{name}}
				<view class="count-down">
					<u-count-down
						ref="uCountDown"
						:timestamp="timestamp"
						v-if="showTimeDown"
						:show-border="true"
						:show-days="false"
						font-size="28" 
						color="#FFF" 
						bg-color="#F59359"
						border-color="#F59359"
						separator-color="#F59359">
					</u-count-down>
				</view>
			</view>
			<view class="title-left-bottom" v-if="subName">{{subName}}</view>
		</view>
		<view class="title-right" v-if="isRight" @click="more" :style="{fontSize: rightSize + 'rpx',color: rightColor}">
			{{rightTxt}}
			<image :src="icon" mode="widthFix" :style="{width: width + 'rpx', height: height + 'rpx'}" v-if="icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			'show-time-down': {
				type: Boolean,
				default: false
			},
			padding: {
				type: String,
				default: '80rpx 30rpx'
			},
			leftSize: {
				type: String,
				default: '42'
			},
			rightColor: {
				type: String,
				default: '#141414'
			},
			rightSize: {
				type: String,
				default: '24'
			},
			width: 0,
			height: 0,
			name: '',
			subName: '',
			rightTxt: {
				type: String,
				default: '更多 | MORE'
			},
			icon: '',
			isRight: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				timestamp: ''
			};
		},
		mounted() {
			this.timestamp = (new Date().setHours(24,0,0,0) - new Date().getTime()) / 1000
		},
		methods: {
			more(){
				this.$emit('more')
			}
		}
	}
</script>

<style lang="scss">
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title-left-top{
			font-size: 42rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			.count-down{
				margin-left: 20rpx;
			}
		}
		.title-left-bottom{
			font-size: 24rpx;
			color: #7A7A7A;
			margin-top: 15rpx;
		}
		.title-right{
			font-size: 24rpx;
			color: #141414;
			display: flex;
			align-items: center;
			image{
				margin-left: 10rpx;
				vertical-align: top;
			}
		}
	}
</style>